<template>
  <el-card class="box-card" shadow="never">
    <el-col :span="20" :offset="2">
      <div class="block">
        <el-timeline>
          <el-timeline-item v-for="(item,index) in historyProcNodeList" :key="index" :icon="setIcon(item.endTime)"
                            :color="setColor(item.endTime)">
            <p style="font-weight: 700">{{ item.activityName }}</p>
            <el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover">
              【{{ item.assigneeName }}】 在 {{ item.createTime }} 发起流程
            </el-card>
            <el-card v-if="item.activityType === 'userTask'" class="box-card" shadow="hover">
              <el-descriptions :column="5" :labelStyle="{'font-weight': 'bold'}">
                <el-descriptions-item label="实际办理">{{ item.assigneeName || '-' }}</el-descriptions-item>
                <el-descriptions-item label="候选办理">{{ item.candidate || '-' }}</el-descriptions-item>
                <el-descriptions-item label="接收时间">{{ item.createTime || '-' }}</el-descriptions-item>
                <el-descriptions-item label="办结时间">{{ item.endTime || '-' }}</el-descriptions-item>
                <el-descriptions-item label="耗时">{{ item.duration || '-' }}</el-descriptions-item>
              </el-descriptions>
              <div v-if="item.commentList && item.commentList.length > 0">
                <div v-for="(comment, index) in item.commentList" :key="index">
                  <el-divider content-position="left">
                    <el-tag :type="approveTypeTag(comment.type)" size="mini">{{
                        commentType(comment.type)
                      }}
                    </el-tag>
                    <el-tag type="info" effect="plain" size="mini">
                      {{ $moment(comment.time).format('YYYY-MM-DD HH:mm:ss') }}
                    </el-tag>
                  </el-divider>
                  <span>{{ comment.fullMessage }}</span>
                </div>
              </div>
            </el-card>
            <el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover">
              {{ item.createTime }} 结束流程
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-col>
  </el-card>
</template>

<script>
export default {
  name: "CirculationRecord",
  props: {
    historyProcNodeList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    commentType() {
      return val => {
        switch (val) {
          case '1':
            return '通过'
          case '2':
            return '退回'
          case '3':
            return '驳回'
          case '4':
            return '委派'
          case '5':
            return '转办'
          case '6':
            return '终止'
          case '7':
            return '撤回'
          case '8':
            return '拒绝'
          case '9':
            return '跳过'
          case '10':
            return '前加签'
          case '11':
            return '后加签'
          case '12':
            return '多实例加签'
          case '13':
            return '跳转'
          case '14':
            return '收回'
        }
      }
    },
    approveTypeTag() {
      return val => {
        switch (val) {
          case '1':
            return 'success'
          case '2':
            return 'warning'
          case '3':
            return 'danger'
          case '4':
            return 'primary'
          case '5':
            return 'success'
          case '6':
            return 'danger'
          case '7':
            return 'info'
        }
      }
    }
  },
  methods:{
    formatDate(date) {
      date = new Date(date)
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，需要加1
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    setIcon(val) {
      if (val) {
        return "checkmark-circle-fill";
      } else {
        return "clock-fill";
      }
    },
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
  }
}
</script>

<style scoped>

</style>
